<template>
    <div class="edit-document-view">

      <div class="edit-document-top">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="addDoc">新增文档</el-button>
      </div>

      <el-table
        size="medium"
        :data="documents.list"
        border
        align="center"
        style="width: 100%">
        <el-table-column
          prop="file_name"
          label="文档名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="file_type"
          label="文档类型"
          width="100">
        </el-table-column>
        <el-table-column
          label="申报所需文件"
          width="150">
          <template slot-scope="scope">
            <span>{{scope.row.need?'是':'否'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="task_name"
          label="提交任务"
          width="200">
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button size="medium" type="text" icon="el-icon-edit" @click="editClick(scope.row,scope.$index)">
              编辑
            </el-button>
            <el-button class="text-btn-red" size="medium" type="text" icon="el-icon-delete" @click="deleteClick(scope.$index)">
              删除
            </el-button>

          </template>

        </el-table-column>
      </el-table>


      <el-dialog
        title="文档"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        :before-close="handleClose">

        <el-form :model="documentData" class="demo-form-inline" label-width="130px" size="medium" label-position="left">
          <el-form-item label="文档名称">
            <el-input v-model="documentData.file_name" clearable></el-input>
          </el-form-item>
          <el-form-item label="文档交付所属任务">
            <el-select v-model="documentData.task_name" @change="planChange" clearable>
              <el-option
                v-for="item in plans"
                :key="item.id"
                :label="item.task_name"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文档类型">
            <el-select v-model="documentData.type_name" @change="typeChange" clearable>
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报所需文件" prop="delivery">
            <el-switch v-model="documentData.need"></el-switch>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="documentConfirm">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "editDocumentView",
        props: {
            documents:Object,
            plans:Array
        },
        data:function () {
            return{
                dialogVisible:false,
                documentData:{},
                editIndex:-1,
                options: [{
                    id: '1',
                    label: '类型1'
                }, {
                    id: '2',
                    label: '类型2'
                }],
            }
        },
        methods:{
            deleteClick:function (index) {
                let doc = this.documents.list[index];

                this.documents.list.splice(index,1)

                this.$emit("delectDoc",doc)
            },
            handleClose:function () {
                this.dialogVisible = true;
            },
            documentConfirm:function () {
                let data = {...this.documentData}


                if (this.editIndex == -1){
                    data.id = this.documents.id + ""
                    this.documents.id++;
                    this.documents.list.push(data)
                }else{
                    this.$emit("delectDoc",this.documents.list[this.editIndex])
                    this.$set(this.documents.list,this.editIndex,data)
                }
                this.$emit("addDoc",data)

                this.dialogVisible = false
            },
            editClick:function(item,index){
                let data = {...item}
                this.documentData = data;
                this.editIndex = index;
                this.dialogVisible = true;
            },
            addDoc:function () {
                this.documentData = {
                    id:"0",
                    file_name:'',
                    file_type:0,
                    type_name:'',
                    need:false,
                    task_id:'0',
                    task_name:'',
                }
                this.editIndex = -1;
                this.dialogVisible = true;

            },
            planChange:function (plan) {
                console.log(plan)
                this.documentData.task_id = plan.id + "";
                this.documentData.task_name = plan.task_name;
            },
            typeChange:function (val) {
                this.documentData.file_type = Number(val.id)
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../../../assets/scss/views/setting/model/editDocumentView.scss";
</style>
